@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  *, *::before, *::after {
    @apply box-border p-0 m-0;
  }
}


@layer components {
  .login-card {
    @apply bg-white flex justify-center   aspect-[4/4] w-1/3 min-w-96;
  }
}


@layer components {
    .sider-menu.ant-menu {
      @apply bg-transparent border-none;
    }
  
    .sider-menu .ant-menu-item-selected {
      @apply bg-blue-50 text-blue-600 font-semibold rounded-lg rounded-none font-bold text-lg transition-all;
    }
  
    .sider-menu .ant-menu-item {
        position: relative;
        @apply !h-14 flex items-center;
      }
      .sider-menu .ant-menu-item-icon{
        @apply !text-lg 
      }
      .sider-menu .ant-menu-item-selected .ant-menu-item-icon{
        @apply !text-xl transition-all
      }
      .sider-menu .ant-menu-item:hover {
        @apply bg-blue-50 !text-blue-600;
      }
      .sider-menu .ant-menu-item::after {
        content: "";
        position: absolute;
        right: 0;
        top: 12%;
        bottom: 12%;
        width: 4px;
        border-radius: theme("borderRadius.full");
        background-color: transparent;
        transition: background-color 0.2s;
      }
      .sider-menu .ant-menu-item:hover::after,
      .sider-menu .ant-menu-item-selected::after {
        background-color: theme("colors.blue.500");
      }
      
  }